import React, { Component } from 'react'
import { connect } from 'dva';

import { Table } from 'antd';
import { UmiComponentProps, BaseComponentProps } from '@/common/type';

export interface P {
  list?: {
    data: Array<any>,
    dataCnt: number
  },
  id: string
}

interface State {
  current: number;
  showInfo: boolean;
  showHistory: boolean;
  showHistoryInfo: boolean;
  deviceId: string;
}

type Props = P & UmiComponentProps & BaseComponentProps;

@connect(({ device_alarm, loading }) => ({
  list: device_alarm.countList || {},
  cond: device_alarm.countCond || {},
  loading: loading.effects['device_alarm/queryCountPage']
}))
class Index extends Component<Props, State> {
  constructor(props) {
    super(props);
    this.initCurrent = this.initCurrent.bind(this);
  }
  readonly state = {
    current: 1,
    showInfo: false,
    showHistory: false,
    showHistoryInfo: false,
    deviceId: null,
  };

  private queryData(offset = 1) {
    const { dispatch, id } = this.props;
    dispatch({
      type: 'device_alarm/queryCountPage',
      payload: {
        pageNum: offset,
        deviceId: id
      },
    });
  }

  private initCurrent() {
    this.setState({
      current: 1
    })
  }

  onShowSizeChange = (current, pageSize) => {
    const { dispatch, cond, id } = this.props;
    cond.pageSize = pageSize;
    cond.deviceId = id;
    dispatch({ type: `device_alarm/updateCountCond`, payload: cond })
  }

  render() {
    const { data = [], dataCnt } = this.props.list;

    const pagination = {
      total: dataCnt,
      showTotal: total => `共 ${total} 条`,
      showSizeChanger: true,
      pageSizeOptions: ['10', '20', '50', '100'],
      onShowSizeChange: this.onShowSizeChange,
      onChange: (current) => {
        this.setState({ current }, () => this.queryData(current));
      },
    };

    const ans = Array.isArray(data) ? data.map((v, index) => ({
      ind: `${index<9 ? '0' : ''}${index+1}`,
      pushTime: v.pushTime,
    })) : []

    const columns = [{
      title: '序号',
      dataIndex: 'ind',
      width: '40%',
    }, {
      title: '通知时间',
      dataIndex: 'pushTime',
    }];

    return (
      <>
        <Table
          columns={columns}
          pagination={pagination}
          dataSource={ans}
          rowKey="id"
          loading={this.props.loading}
          bordered
        />
      </>
    );
  }
}

export default Index;
